import React, { Component } from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Dimensions,
  Animated, Image
} from 'react-native';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');

/**
 * 沟通中列表
 */
class CommunicatingListModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{
        id: 1,
        name: '王爽@腾发二手车',
        price: '20.2',
        date: '2025-02-18-12:32',
        status: '待确认',
      }, {
        id: 2,
        name: '王爽@腾发二手车',
        price: '20.2',
        date: '2025-02-18-12:32',
        status: '待确认',
      }, {
        id: 3,
        name: '王爽@腾发二手车',
        price: '20.2',
        date: '2025-02-18-12:32',
        status: '待确认',
      }],
      loading: false,
      page: 1,
      modalAnimation: new Animated.Value(0),
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.visible && !prevProps.visible) {
      this.animateIn();
    } else if (!this.props.visible && prevProps.visible) {
      this.animateOut();
    }
  }

  animateIn = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  animateOut = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  loadMoreData = () => {
    if (this.state.loading) return;
    this.setState({ loading: true });

    // 模拟加载数据
    setTimeout(() => {
      const newData = Array(10).fill(0).map((_, index) => ({
        id: this.state.data.length + index,
        name: '王爽@腾发二手车',
        price: '20.2',
        date: '2025-02-18-12:32',
        status: '待确认',
      }));

      this.setState(prevState => ({
        data: [...prevState.data, ...newData],
        page: prevState.page + 1,
        loading: false,
      }));
    }, 1000);
  };

  renderItem = ({ item, index }) => (
    <View style={styles.quotationItem} key={index}>
      <View style={styles.itemHeader}>

        <Image style={styles.avatar} />

        <View style={styles.userInfo}>

          <View style={styles.nameContainer}>

            <Text style={styles.userName}>{item.name}</Text>
            <Text style={styles.date}>{item.date}</Text>
          </View>

          <Text style={[styles.date, { marginTop: 5 }]}>有个问题想咨询一下，关于二手车怎么卖</Text>

        </View>

      </View>


      <View style={styles.actionButtons}>

        <Text style={styles.price}>收: {item.price}万元</Text>

        <View style={styles.buttonContainer}>

          <TouchableOpacity style={styles.confirmButton}>
            <Text style={styles.buttonText}>确认交易</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.confirmButton}>
            <Text style={styles.buttonText}>驳回报价</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.confirmButton}>
            <Text style={styles.buttonText}>取消报价</Text>
          </TouchableOpacity>
        </View>

      </View>
    </View>
  );

  render() {
    const translateY = this.state.modalAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [SCREEN_HEIGHT, 0],
    });

    return (
      <Modal
        transparent
        visible={this.props.visible}
        onRequestClose={this.props.onClose}
        animationType="none"
      >
        <View style={styles.modalContainer}>
          <TouchableOpacity
            style={styles.overlay}
            activeOpacity={1}
            onPress={this.props.onClose}
          />
          <Animated.View
            style={[
              styles.contentContainer,
              { transform: [{ translateY }] }
            ]}
          >
            <View style={styles.header}>
              <Text style={styles.title}>待确认列表</Text>

            </View>
            <FlatList
              data={this.state.data}
              renderItem={this.renderItem}
              keyExtractor={item => item.id.toString()}
              onEndReached={this.loadMoreData}
              onEndReachedThreshold={0.1}
              ListFooterComponent={
                this.state.loading ?
                  <Text style={styles.loading}>加载中...</Text> :
                  null
              }
            />
            <View style={styles.line}></View>
            <TouchableOpacity
              style={styles.cancelBtn}
              onPress={this.props.onClose}>
              <Text style={styles.closeButton}>取消</Text>
            </TouchableOpacity>
          </Animated.View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  contentContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',

    maxHeight: SCREEN_HEIGHT * 0.8,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15,

  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  closeButton: {
    fontSize: 16,
    color: '#333333',
  },
  quotationItem: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  itemHeader: {
    flexDirection: 'row',

    alignItems: 'center',
    marginBottom: 10,
  },
  userInfo: {
    flexDirection: 'column',
    flex: 1,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 48,
    backgroundColor: '#eee',
    marginRight: 10,
  },
  nameContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  userName: {
    fontSize: 16,
    color: '#333333',
    fontWeight: 'bold'
  },
  date: {
    fontSize: 14,
    color: '#999',
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  priceLabel: {
    fontSize: 16,
    color: '#ED542E',
  },
  price: {
    fontSize: 16,
    color: '#ED542E',
    fontWeight: '500',
  },
  actionButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  buttonContainer:{
    flexDirection: 'row',
    alignItems: 'center',
  },
  confirmButton: {
    
    paddingHorizontal: 15,
    paddingVertical: 6,
    borderRadius: 50,
    marginLeft: 10,
    borderColor:'#E5E5E5',
    borderWidth:1
  },
  rejectButton: {
    backgroundColor: '#f5f5f5',
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 4,
    marginLeft: 10,
  },
  buttonText: {
    fontSize: 14,
    color:'#333333'
  },
  loading: {
    textAlign: 'center',
    padding: 10,
    color: '#999',
  },
  cancelBtn: {
    height:48,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  line:{
    height:10,
    backgroundColor:'#f6f6f6'
  }
});

export default CommunicatingListModal;